*{
  margin: 0;
  padding: 0;
}
body{
  background: linear-gradient(to bottom, #c0392b, #16a085, #2980b9);
}
.wrap{
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
.cube {
  width: 200px;
  height: 200px;
  position: absolute;
  transform-style: preserve-3d;
  animation: cube 8s linear infinite;
}
.cube2 {
  top: 100px;
}
.cube .side{
  width: 100%;
  height: 100%;
  position: absolute;
  border: 1px solid #000;
  box-sizing: border-box;
  padding: 10px;
  background-color: #fff;
  transition: transform .8s ease;
}
.cube2, .cube3 {
  width: 200px;
  height: 200px;
  position: absolute;
  transform-style: preserve-3d;
  transform: rotateY(-45deg) rotateX(-15deg) rotateZ(15deg);
}
.cube2 .side, .cube3 .side{
  width: 100%;
  height: 100%;
  position: absolute;
  border: 1px solid #000;
  box-sizing: border-box;
  padding: 10px;
  background-color: #fff;
  transition: transform .8s ease;
}
@keyframes cube {
  0% {
    transform: rotateY(0deg) rotateX(-45deg) rotateZ(-45deg);
  }
  100% {
    transform: rotateY(360deg) rotateX(-45deg) rotateZ(-45deg);
  }
}
.cube:hover{
  animation-play-state: paused;
}
.cube .cube-front{
  transform: rotateY(0deg) translateZ(100px);
}
.cube .cube-back{
  transform: rotateY(180deg) translateZ(100px);
}
.cube .cube-left{
  transform: rotateY(-90deg) translateZ(100px);
}
.cube .cube-right{
  transform: rotateY(90deg) translateZ(100px);
}
.cube .cube-top{
  transform: rotateX(90deg) translateZ(100px);
}
.cube .cube-bottom{
  transform: rotateX(-90deg) translateZ(100px);
}

.cube2 .cube-front{
  transform: rotateY(0deg) translateZ(100px);
}
.cube2 .cube-right{
  transform: rotateY(90deg) translateZ(100px);
}
.cube2 .cube-top{
  transform: rotateX(90deg) translateZ(100px);
}


.cube2 .cube-top:hover{
  transform: rotateY(0deg) translateZ(100px) translate(0px, -200px);
}
.cube2 .cube-right:hover{
  transform: rotateY(0deg)  translateZ(100px) translate(200px, 0px);
}

